<pngx-widget-frame
  *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
  [title]="savedView.name"
  [loading]="loading"
  [draggable]="savedView"
  >

  @if (documents.length) {
    <a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
  }

  @if (documents.length) {
    <table content class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th scope="col" i18n>Created</th>
          <th scope="col" i18n>Title</th>
          <th scope="col" class="d-none d-md-table-cell" i18n>Tags</th>
          <th scope="col" class="d-none d-md-table-cell" i18n>Correspondent</th>
        </tr>
      </thead>
      <tbody>
        @for (doc of documents; track doc) {
          <tr (mouseleave)="maybeClosePopover()">
            <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a></td>
            <td class="py-2 py-md-3">
              <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
            </td>
            <td class="py-2 py-md-3 d-none d-md-table-cell">
              @for (t of doc.tags$ | async; track t) {
                <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t, $event)"></pngx-tag>
              }
            </td>
            <td class="position-relative py-2 py-md-3 d-none d-md-table-cell">
              @if (doc.correspondent !== null) {
                <a class="btn-link text-dark text-decoration-none py-2 py-md-3" routerLink="/documents" [queryParams]="getCorrespondentQueryParams(doc.correspondent)">{{(doc.correspondent$ | async)?.name}}</a>
              }
              <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
                <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
                  [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
                  autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
                  <svg class="buttonicon-xs" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#eye"/>
                  </svg>
                </a>
                <ng-template #previewContent>
                  <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
                </ng-template>
                <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
                  <svg class="buttonicon-xs" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#download"/>
                  </svg>
                </a>
              </div>
            </td>
          </tr>
        }
      </tbody>
    </table>
  } @else {
    <p i18n class="text-center text-muted mb-0 fst-italic">No documents</p>
  }


</pngx-widget-frame>
